<template>
  <uni-popup
    ref="popup"
    type="bottom"
    border-radius="10px 10px 0 0"
    class="popup-box"
  >
    <view class="popup-context">
      <view class="but-box">
        <button class="again-but" @click="again">重来</button>
        <button class="back-but" @click="back">返回</button>
      </view>
      <view class="analyse-box">
        <uni-section title="基础卡片" type="line">
          <uni-card :is-shadow="false">
            <view class="result-text"
              >本次答题耗费 <text class="cost-time">{{ costTime }}秒</text>,
              正确率 <text class="correctness">{{ correctness || '0%' }}</text
              >。
            </view>
          </uni-card>
        </uni-section>
      </view>

      <view class="tipoc-box">
        <uni-section title="题目分析" type="line">
          <uni-card :is-shadow="false">
            <view class="topic-ul">
              <view
                v-for="(item, index) in topicList"
                :key="index"
                class="topic-li"
              >
                <view class="topic" v-html="item.topic">题目:</view>
                <view class="topic">正确答案: {{ item.answer }}</view>
                <view class="topic">你的答案: {{ item.youAnswer }}</view>
                <view
                  >是否正确:
                  <text :class="item.ok ? 'ok' : 'no'">{{
                    item.ok ? '正确' : '错误'
                  }}</text></view
                >
              </view>
            </view>
          </uni-card>
        </uni-section>
      </view>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const popup = ref()

const emits = defineEmits(['again', 'back'])

withDefaults(
  defineProps<{
    correctness: string
    costTime: string | number
    topicList: Array<GenerateTopicType>
  }>(),
  {},
)

const again = () => {
  emits('again')
}

const back = () => {
  uni.navigateBack()
}

const open = () => {
  popup.value.open('buttom')
}

const close = () => {
  popup.value.close()
}

defineExpose({
  open,
  close,
})
</script>

<style scoped lang="scss">
.popup-box {
  .but-box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: start;
    box-sizing: border-box;
    background-color: #f5f7fa;
    padding: 20rpx 0;

    .again-but {
      height: 70rpx;
      font-size: 0.85rem;
      background-color: #00b26a;
      color: #fff;
    }
    .back-but {
      height: 70rpx;
      font-size: 0.85rem;
    }
  }

  .popup-context {
    width: 100%;
    height: 95vh;
    background-color: #fff;

    .analyse-box {
      font-weight: 700;

      .result-text {
        font-size: 1.25rem;

        .cost-time {
          color: #ff7043;
        }

        .correctness {
          color: red;
        }
      }
    }
    .tipoc-box {
      width: 100%;
      .topic-ul {
        width: 100%;
        .topic-li {
          background-color: #f5f7fa;
          margin-top: 20rpx;
          border-radius: 20rpx;
          box-sizing: border-box;
          padding: 30rpx;
          color: #000;

          .ok {
            color: #00b26a;
          }
          .no {
            color: red;
          }
        }
      }
    }
  }
}
</style>
